<template>
  <div>
    <div class="tj"></div>
  </div>
</template>
<script>
export default {
  name: 'VueWelcome'
}
</script>
<style scoped>
.tj {
  width: 400px;
  height: 400px;
  border: 1px solid white;
  margin: 100px auto;
  background-image: linear-gradient(white 50%, black 50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  animation: TaiJi 10s linear infinite;
}

@keyframes TaiJi {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.tj::before {
  content: '';
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: radial-gradient(black 10%, white 10%);
}

.tj::after {
  content: '';
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: radial-gradient(white 10%, black 10%);
}
</style>
